<template>
  <div class="header">
    <el-menu
      :default-active="active"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/index/projectmange">项目管理</el-menu-item>
      <el-menu-item index="/index/usermange">用户管理</el-menu-item>
      <el-menu-item index="/index/employeemange">工人管理</el-menu-item>
      <el-menu-item index="/index/advance-list">预支列表</el-menu-item>
      <el-menu-item index="/index/clock-in-list">打卡列表</el-menu-item>
      <el-menu-item index="/index/audit-advance">预支审核</el-menu-item>
      <el-menu-item index="/index/job-details">工作详情</el-menu-item>

    </el-menu>
    <el-button
      class="login-out"
      type="primary"
      @click="loginOut"
    >退出登录</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: ''
    }
  },
  methods: {
    loginOut() {
      this.$router.push('/')
      localStorage.removeItem('token')
    }
  },
  mounted() {
    this.active = this.$route.path
  }
}
</script>

<style scoped lang="less">
.header {
  position: relative;
}
.login-out {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}
</style>
